<template>
	<view :data-theme="theme" class="container">
		<view class="card card-top">
			<u--image :showLoading="true" :src="data.image" width="80px" height="80px"></u--image>
			<view class="card_right">
				<text class="card-title"><span v-if="data.brandName">[{{data.brandName}}]</span>{{data.name}}<text
						style="margin-left: 20rpx;">{{data.skuName}}</text></text>
				<!-- <text style="margin: 30rpx 0;padding-bottom: 10rpx;">售卖规格:{{data.skuName}}</text> -->
			</view>
		</view>
		<view class="section-content" style="margin: 30rpx;font-weight: bold;">
			<text class="sku_title">{{data.skuName}}</text>
		</view>

		<scroll-view :scroll-y="true" :style="{ 'padding-bottom':'20rpx' }"
			style="height: 100%; overflow: hidden;margin-bottom: 150rpx;">
			<!-- 区域价格列表 -->
			<view class="card" v-for="(item,index) in businessPriceData" :key="item.id">
				<view style="border-radius: 10px;">
					<view class="demo-name">
						<view class="demo-uni-col dark" style="font-weight: bold;font-size: 32rpx;">
							{{item.name}}
						</view>
					</view>
					<view class="demo-uni-row" style="display: flex;">
						<view class="demo-uni-col light" style="color: #828282;flex: 1;">当前价格</view>
						<view class="demo-uni-col light" style="flex: 2;">
							￥{{item.price ? item.price : ''}}/{{data.specUnit ? data.specUnit : ''}}
							<text
								style="margin-left: 20rpx;">(￥{{item.unitPrice ? item.unitPrice : ''}}/{{data.specUnit ? data.specUnit : ''}})</text>
						</view>
					</view>
					<view class="demo-uni-row" style="display: flex;">
						<view class="demo-uni-col light" style="color: #828282;flex: 1;">区域售价范围</view>
						<view class="demo-uni-col light" style="flex: 2;">
							￥{{item.price ? item.price : ''}}/{{data.specUnit ? data.specUnit : ''}}
						</view>
					</view>
					<view class="demo-uni-row" style="display: flex;">
						<view class="input-container">
							<span class="fixed-text">￥</span>
							<input class="input-text" type="number" v-model="item.newProductPrice" :min="0"
								placeholder="输入新价格" @blur="blur1(item,index)" @input="inputPriceValue(item,index)" />
							<text style="margin-left: 8rpx;">/{{data.specUnit ? data.specUnit : ''}}</text>
						</view>
						<view class="input-container">
							(<span class="fixed-text">￥</span>
							<input class="input-text" type="number" v-model="item.newProductPrice" :min="0"
								placeholder="输入单价" @blur="blur2(item,index)" @input="inputPriceValue(item,index)" />
							<text style="margin-left: 8rpx;">/{{data.specUnit ? data.specUnit : ''}}</text>)
						</view>
					</view>
					<view class="demo-bottom" style="display: flex;margin-bottom: 60rpx;align-items: center;">
						<view>
							<view class="demo-uni-col" style="color: #808080;">预计收入<text
									style="color: #000;">￥{{item.newProductPrice?(item.newProductPrice - (item.newProductPrice*0.135+0.00).toFixed(2) - 0.19).toFixed(2):'-'}}</text>
							</view>
						</view>
						<view>
							<view class="amount_number">
								<view style="color: #808080;align-items: center;display: flex;">佣金额
									<text>￥{{item.newProductPrice?(item.newProductPrice*0.135+0.00).toFixed(2):'-'}}</text>
									, 预估揽收费<text>￥0.19</text><uni-icons type="forward" size="15"
										@click="openSevent(item)"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>


		<view class="footer">
			<button class="bg_color" size="large" @click="upDataPriceButton">提交</button>
		</view>

		<tui-drawer mode="bottom" :visible="showEstimatedRevenue" @close="showEstimatedRevenue = false">
			<view class="ensure">
				<view @click="showEstimatedRevenue = false" class="title">预计收入说明<text
						class="iconfont icon-guanbi5"></text></view>
				<view style="height: auto;padding-top: 20rpx; margin: 0 40rpx;">
					<view>
						<view style="background-color: #f7f7f7;border-radius: 10rpx;padding: 20rpx;">
							<view style="margin-bottom: 30rpx;">
								<view style="font-size: 30rpx;">预计收入<text
										style="font-weight: bolder;margin-left: 20rpx;">￥{{seventData.newProductPrice?(seventData.newProductPrice - ((seventData.newProductPrice*0.135)+0.00).toFixed(2) - 0.19).toFixed(2):'-'}}</text>
								</view>
								<view
									style="background-color: #f7f7f7;font-size: 24rpx;color: #8d8d8f;margin: 10rpx 0;">
									=新销售价(￥{{seventData.newProductPrice?seventData.newProductPrice:'-'}})-商品佣金额(￥{{seventData.newProductPrice?((seventData.newProductPrice*0.135)+0.00).toFixed(2):'-'}})-预估揽收费用(￥0.19)
								</view>
							</view>
							<view>
								<view style="font-size: 30rpx;">其中商品佣金额 <text
										style="font-weight: bolder;margin-left: 20rpx;">￥{{seventData.newProductPrice?((seventData.newProductPrice*0.135)+0.00).toFixed(2):'-'}}</text>
								</view>
								<view
									style="background-color: #f7f7f7;font-size: 24rpx;color: #8d8d8f;margin: 10rpx 0;">
									=新销售价(￥{{seventData.newProductPrice?seventData.newProductPrice:'-'}})*费率(13.50%)+费额(￥0.00)
								</view>
							</view>
						</view>
						<view style="margin-top: 40rpx;display: flex;color: #9e9ea0;line-height: 1.4;font-size: 24rpx;">
							<text>
								{{Revenue}}
							</text>
						</view>
					</view>
					<view style="width: 100%;margin-top: 80rpx;">
						<button @click="closeRevenue" class="bg_color"
							style="border-radius: 10px;padding: 20rpx;color: #fff;">知道了</button>
					</view>
				</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
	import {
		QueryPriceApi,
		businessAppQueryCommodityRegionalPriceSKUApi,
		upDatePriceByListApi
	} from '@/api/product.js';
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		components: {
			'uni-section': UniSection,
			tuiDrawer,
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				data: {}, //传过来的数据

				productSku: {
					sku: ''
				}, //商品sku
				businessPriceData: [], //列表数据
				upDataPrice: [], //深拷贝的列表数组
				// -----------弹窗组件-------
				showEstimatedRevenue: false,
				Revenue: '说明: 揽收费用系根据平台服务协议及相关规则计算的，将跨城揽收商品履约至新城的运费;上述公式中, 预计收入, 预估揽收运费, 商品佣金仅供定价参考，实际金额均以订单实际完成情况为准 ',
				seventData: {},
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.data = JSON.parse(options.item);
			this.productSku.sku = this.data.skuId;
			this.getBusinessPrice();
		},
		methods: {
			//获取区域价格列表---api
			getBusinessPrice() {
				QueryPriceApi(this.productSku).then((res) => {
					this.upDataPrice = JSON.parse(JSON.stringify(res.data))
					this.businessPriceData = res.data
				})
			},
			//输入框失去焦点,判断输入值
			blur1(res, index) {
				if (parseInt(res.newProductPrice) < 0) {
					this.businessPriceData[index].newProductPrice = '';
				}
			},
			blur2(res, index) {
				if (parseInt(res.newUnitPrice) < 0) {
					this.businessPriceData[index].newUnitPrice = '';
				}
			},
			/** 
			输入框输入事件
			 */
			inputPriceValue(value, index) {
				if (parseInt(value.newProductPrice) > 100000) {
					this.businessPriceData[index].newProductPrice = '';
					return uni.showToast({
						title: '价格不能大于等于100000',
						icon: 'none',
						duration: 3000 // 持续时间为 3 秒
					});
				}
			},
			// 打开收入说明
			openSevent(item) {
				this.seventData = item;
				this.showEstimatedRevenue = true;
			},
			// 关闭收入说明
			closeRevenue() {
				this.showEstimatedRevenue = false;
			},
			// 提交更新按钮
			upDataPriceButton() {
				let newManageDataValue = [];
				for (let i = 0; i < this.businessPriceData.length; i++) {
					if (this.businessPriceData[i].newProductPrice && this.businessPriceData[i].newProductPrice != '') {
						newManageDataValue.push(this.businessPriceData[i])
					}
				};
				if (!newManageDataValue.length) {
					return uni.showToast({
						title: '请编辑后再提交',
						icon: 'error',
						duration: 2000 // 持续时间为 2 秒
					});
				}

				let ManageData = newManageDataValue.map(obj => {
					const {
						name,
						price,
						specUnit,
						unitPrice,
						...rest
					} = obj; //删除部分属性
					return rest
				}); //要删除的数据的数组

				let newManageData = ManageData.map(obj => {
					const {
						newProductPrice,
						skuId,
						...rest
					} = obj;
					return {
						unitPrice: parseInt(newProductPrice),
						price: parseInt(newProductPrice),
						sku: parseInt(this.productSku.sku),
						productId: this.data.id,
						...rest
					};
				}) //修改属性名

				upDatePriceByListApi(newManageData).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000 // 持续时间为 2 秒
						});
					}
				});

				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						uni.$emit('shopMessageoTherFun'); // 通过事件总线传递数据给上一个页面
					}
				});
			},

		},
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.demo-name {
		margin-top: 20rpx;
	}

	.card-top {
		position: fiexd;
		top: 0;
		left: 0;
		background-color: #ebebeb;
		display: flex;
		align-items: center;
		// text-align: center;

		.card_right {
			display: flex;
			flex-flow: column;
			flex: 1;
			margin: 12rpx 12rpx 0 20rpx;

			.card-title {
				font-weight: bold;
			}
		}
	}

	.sku_title {
		display: flex;
		// height: 96rpx;
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #595c63;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 100%;
			@include main_bg_color(theme);
		}
	}

	.demo-uni-row {
		margin: 30rpx 0;
		// margin: 20rpx;
	}

	.amount_number {
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.input-container {
		position: relative;
		flex: 1;

		.input-text {
			border: 2rpx solid #fff;
			background-color: #f0f0f0;
			border-radius: 8rpx;
			display: inline-block;
			width: 75%;
			height: 70rpx;
			// padding-left: 34rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.fixed-text {
		position: absolute;
		left: 20rpx;
		/* 调整固定文字的左侧偏移量 */
		top: 50%;
		transform: translateY(-50%);
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 38rpx 0 36rpx 0;
			position: relative;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 36rpx;
			}
		}
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding: 10px;
		background-color: #fff;
	}

	.footer>button {
		line-height: 92rpx;
		font-weight: bold;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
	}
</style>